$(function(){
    var pane = 0;
    $(".choice").click(function (e) {
        $(".ripple").remove();
        var posX = $(this).offset().left,
            posY = $(this).offset().top,
            buttonWidth = $(this).width(),
            buttonHeight = $(this).height();
        $(this).prepend("<span class='ripple'></span>");
        if (buttonWidth >= buttonHeight) {
            buttonHeight = buttonWidth;
        } else {
            buttonWidth = buttonHeight;
        }

        var x = e.pageX - posX - buttonWidth / 2;
        var y = e.pageY - posY - buttonHeight / 2;

        $(".ripple").css({
            width: buttonWidth,
            height: buttonHeight,
            top: y + 'px',
            left: x + 'px'
        }).addClass("rippleEffect");
        var i = ($(this).index() - 1) * 60;
        $(".bar1").css({
            top: i + "px"
        });
        var panen = $(".choice").index(this);
        if (pane != panen) {
            $("#pane" + pane).css("display", "none");
            pane = panen;
            $("#pane" + pane).css("display", "block");
        }
    });
});
